﻿@section header {
    <!-- 引入 element-ui 的样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 必须先引入vue，后使用element-ui -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <!-- 引入element 的组件库-->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <style>
        .el-form-item {
            margin-bottom: 20px;
        }
        .image-preview {
            max-width: 200px;
            max-height: 200px;
            border-radius: 4px;
            border: 1px solid #dcdfe6;
        }
        .el-textarea__inner {
            min-height: 80px;
        }
        .id-card-container {
            display: flex;
            gap: 20px;
        }
        .id-card-item {
            position: relative;
            width: 300px;
        }
        .id-card-image {
            width: 100%;
            height: 180px;
            object-fit: cover;
            border-radius: 4px;
            border: 1px solid #dcdfe6;
        }
        .id-card-label {
            position: absolute;
            left: 50%;
            bottom: -20px;
            transform: translateX(-50%);
            font-size: 12px;
            color: #666;
        }
    </style>
}

@{
    Layout = "~/Views/Shared/_FormWhite.cshtml";
    var operatorInfo = ViewData["OperatorInfo"] as OperatorInfo;
}

<div id="app" class="wrapper animated fadeInRight">
    <el-form ref="form" :model="form" label-width="120px">
        <el-form-item label="店铺名称">
            <el-input v-model="form.shop_name" disabled></el-input>
        </el-form-item>

        <el-form-item label="店铺地址">
            <el-input v-model="form.address" disabled></el-input>
        </el-form-item>

        <el-form-item label="经营者姓名">
            <el-input v-model="form.owner_name" disabled></el-input>
        </el-form-item>

        <el-form-item label="联系电话">
            <el-input v-model="form.phone" disabled></el-input>
        </el-form-item>

        <el-form-item label="营业执照">
            <img v-if="form.business_license" 
                 :src="form.business_license" 
                 style="max-width: 200px; max-height: 200px;">
        </el-form-item>
        <el-form-item label="身份证照片">
            <div class="id-card-container">
                <div class="id-card-item" v-if="form.idCardFront">
                    <img :src="form.idCardFront" class="id-card-image">
                </div>
                <div class="id-card-item" v-if="form.idCardBack">
                    <img :src="form.idCardBack" class="id-card-image">
                </div>
            </div>
        </el-form-item>
        <el-form-item label="经营类目">
            <el-checkbox-group v-model="form.business_categories" disabled>
                <el-checkbox v-for="option in checkboxOptions" 
                            :key="option.value" 
                            :label="option.value">
                    {{option.name}}
                </el-checkbox>
            </el-checkbox-group>
        </el-form-item>

        <el-form-item label="申请时间">
            <el-input v-model="form.apply_time" disabled></el-input>
        </el-form-item>

        <el-form-item label="审核状态">
            <el-radio-group v-model="form.status">
                <el-radio :label="0">待审核</el-radio>
                <el-radio :label="1">通过</el-radio>
                <el-radio :label="2">拒绝</el-radio>
            </el-radio-group>
        </el-form-item>

        <el-form-item label="拒绝原因" v-if=" form.status === 2">
            <el-input type="textarea" 
                      v-model="form.reject_reason" 
                      :rows="3"
                      placeholder="请输入拒绝原因"></el-input>
        </el-form-item>

        <el-form-item label="审核备注" >
            <el-input type="textarea" 
                      v-model="form.audit_remark" 
                      :rows="3"
                      placeholder="请输入审核备注"></el-input>
        </el-form-item>
         
    </el-form>
</div>

<script type="text/javascript">
    var id = ys.request("id");
    var isAdmin = '@(operatorInfo?.IsSystem)' === '1';
    
    var vm = new Vue({
        el: '#app',
        data: {
            isAdmin: isAdmin,
            checkboxOptions: [
                { name: '新车销售', value: '1' },
                { name: '二手车', value: '2' },
                { name: '二手车寄售', value: '3' },
                { name: '租赁', value: '4' },
                { name: '维保', value: '5' }
            ],
            form: {
                Id: id || '',
                shop_name: '',
                address: '',
                owner_name: '',
                phone: '',
                business_license: '',
                business_categories: [],
                status: 0,
                apply_time: '',
                audit_time: '',
                audit_user_id: '',
                audit_remark: '',
                reject_reason: '',
                create_time: '',
                update_time: '',
                idCardFront: '',
                idCardBack: ''
            }
        },
        methods: {
            getFormData() {
                if (this.form.Id > 0) {
                    var that = this;
                    ys.ajax({
                        url: '@Url.Content("~/QixingManage/ShopApplications/GetFormJson")' + '?id=' + that.form.Id,
                        type: 'get',
                        success: function (obj) {
                            if (obj.Tag == 1) {
                                that.form = obj.Data;
                                if (typeof that.form.business_categories === 'string') {
                                    that.form.business_categories = that.form.business_categories.split(',').filter(Boolean);
                                }
                            }
                        }
                    });
                }
            }
        },
        mounted() {
            if (this.form.Id) {
                this.getFormData();
            }
        }
    });

    function saveForm(index) {
        // if (!vm.isAdmin) {
        //     ys.msgError("您没有权限执行此操作!");
        //     return;
        // }

        if (vm.form.status === 2 && !vm.form.reject_reason) {
            ys.msgError("请输入拒绝原因!");
            return;
        }

        var postData = {
            Id: vm.form.Id,
            status: vm.form.status,
            audit_remark: vm.form.audit_remark,
            reject_reason: vm.form.reject_reason
        };

        ys.ajax({
            url: '@Url.Content("~/QixingManage/ShopApplications/SaveFormJson")',
            type: 'post',
            data: postData,
            success: function (obj) {
                if (obj.Tag == 1) {
                    ys.msgSuccess(obj.Message);
                    parent.searchGrid();
                    parent.layer.close(index);
                } else {
                    ys.msgError(obj.Message);
                }
            }
        });
    }
</script>

